<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 1. 虚拟dom  通过js对象来描述的一段dom结构
        let oDiv = {
            // 标签名称
            tagName: "div",
            // 属性名称
            props: {
                id: "box",
                className: ["obox", "one"],
                "data-uid": 888,
                style: {
                    color: 'orange',
                    background: "green"
                }
            },
            // 子节点
            children: [
                "我是文本",
                {
                    tagName: "h3",
                    props: {},
                    children: ["我是标题"]
                },
                {
                    tagName: "ul",
                    props: {
                        className: "oul"
                    },
                    children: [
                        {
                            tagName: "li",
                            props: {
                                style: "color: red"
                            },
                            children: ["第一个数据"]
                        },
                        {
                            tagName: "li",
                            props: {
                                style: {
                                    color: "orange",
                                    background: "skyblue"
                                }
                            },
                            children: ["第二个数据"]
                        }
                    ]
                }
            ]
        }

        // 2. 把虚拟dom转换为真实的dom节点

        // 封装一个转换真实dom结构的函数

        // 写一个函数的时候考虑那些部分
        // 1. 函数的参数
        // 2. 函数的返回值
        // 3. 函数的功能
        function vDomToRdom(vDom) {
            // 1.把vDom中的属性给结构出来
            const { tagName, props, children } = vDom
            // 2. 根据标签名称创建真实的dom结构
            const realDom = document.createElement(tagName)
            // 3. 给标签添加属性 -- 因为有多个 -- 循环
            // Object.keys(props).forEach(item => {
            //     realDom[item] = props[item]
            // })
            
            // 修改以后
            Object.keys(props).forEach(item => {
                if (item === "className" && typeof props[item] === "object") {
                    realDom.setAttribute(item, props[item].join(" "))
                } else if (item === "style" && typeof props[item] === "object") {
                    // 开始处理style
                    Object.keys(props[item]).forEach(styleItem => {
                        realDom.style[styleItem] = props[item][styleItem]
                    })
                } else {
                    realDom.setAttribute(item, props[item])
                }
            })

            // 4. 给realDom添加子节点
            children.forEach(item => {
                // 4.1 如果是文本节点，直接添加
                if (typeof item === "string") {
                    // 创建文本节点
                    let textNode = document.createTextNode(item)
                    // 追加
                    realDom.appendChild(textNode)
                } else {
                    // 递归
                    let rNode = vDomToRdom(item)
                    realDom.appendChild(rNode)
                }
            })
            return realDom
        }

        // 添加到body中
        document.body.appendChild(vDomToRdom(oDiv))

        // const obj = {
        //     name: "张三",
        //     age: 18
        // }

        // console.log(Object.values(obj))

        // 思考
        // 1. 如果添加的类名是多个的情况怎么办
        // 2. 如果style是对象的形式
        // 3. 如果有自定义属性怎么添加

    </script>
</body>
</html>